Disable zoom for login page - #106160
Conversation
Jetpack Cloud live (direct link)
Automattic for Agencies live (direct link)
|
038b7e5 to
58079f4
Compare
matticbot
added
the
[Status] Needs Review
58079f4 to
31f0cb3
Compare
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
| <meta charSet="utf-8" /> | ||
| <meta httpEquiv="X-UA-Compatible" content="IE=Edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> |
There was a problem hiding this comment.
Disabling zoom for webpages is generally frowned upon as zooming is often considered an accessibility feature. I suggest we avoid this.
iOS only performs the zoom-on-input-focus behavior for inputs with font sizes beneath 16px. Previous font size changes were made in #97374 to avoid the zoom as well. I suggest we pursue this approach instead.
From inspecting the current element styles, the font size is surprisingly calculated to be 14px, even though the Sass attempts to set it as 16px. @alshakero do you have ideas as to what is causing this rem miscalculation?
There was a problem hiding this comment.
Disabling zoom for webpages is generally frowned upon as zooming is often considered an accessibility feature. I suggest we avoid this.
For your average webpage, I agree. For an application interface (especially inside a mobile app), it's unusual to be able to zoom in. If users complain about accessibility issues, we should solve that the same way we would for any other application accessibility problem – increase the font size or fix the layout.
iOS only performs the zoom-on-input-focus behavior for inputs with font sizes beneath 16px
The 16px threshold is an implementation detail that can change at any time – the fix from 9 months ago already doesn't work, so I'm reluctant to rely on something that can break again at any time.
If this is an issue, IMHO we should adopt the system text sizes per https://webkit.org/blog/3709/using-the-system-font-in-web-content/
There was a problem hiding this comment.
For your average webpage, I agree. For an application interface (especially inside a mobile app), it's unusual to be able to zoom in. If users complain about accessibility issues, we should solve that the same way we would for any other application accessibility problem – increase the font size or fix the layout.
My personal opinion is that it is not that clear cut. The line between application interface and document can be pretty blurry. Yes, some scenarios could be resolved with better design; other times, accessibility features are truly the most relevant and effective solution. There are a lot of disparate use cases for accessibility features.
Not a "hill I'm doing to die on" for this particular circumstance, but I still think it is misguided if alternatives exist.
The 16px threshold is an implementation detail that can change at any time – the fix from 9 months ago already doesn't work, so I'm reluctant to rely on something that can break again at any time.
If this is an issue, IMHO we should adopt the system text sizes per https://webkit.org/blog/3709/using-the-system-font-in-web-content/
Fair. It is unfortunate that (seemingly) a Sass utility intended to calculate rem based on explicit pixel values is not working as expected.
There was a problem hiding this comment.
Fair. It is unfortunate that (seemingly) a Sass utility intended to calculate rem based on explicit pixel values is not working as expected.
Agreed – I'm going to merge this PR, but if we can get this reliably fixed by other means I'm happy to revert these changes.
This screen is many folks' first interaction with the app, and right now it appears broken so I want to solve that problem as quickly as we're able.
There was a problem hiding this comment.
The back and forth continues! While it looks like the intention was to only disable zoom on the login screen, this actually disabled zoom throughout Calypso.
I'm re-enabling zoom here, but only for MSD, which should hopefully continue to satisfy the issue this PR was trying to fix.
#113337
MSD uses the core components, which ensure on mobile devices the font size is >= 16px so the zoom-on-focus thing doesn't happen. But I can only be sure we use core components on MSD, that's why it's enabled there.
There's no benefit to zooming in on this page
Fwiw I think this statement is too sweeping. While we may feel the elements on the page are large enough, users need the ability to zoom in up to 400%. They may be partially sighted, or perhaps only temporarily partially sighted. It's not a black and white thing of either a screen reader user, or a fully sighted user. There's lots in between.
github-actions
Bot
removed
the
[Status] Needs Review
4 participants
Proposed Changes
Disables pinch-to-zoom and auto-zoom for the login page – this will make OAuth login on mobile devices look and work better.
Why are these changes being made?
There's no benefit to zooming in on this page – the elements are very large. So we're disabling it.
Testing Instructions
On a physical device (or a simulator), load WordPress.com in a private browsing window in Safari. Note that the login screen "jumps" and the edges are cut off (the logo on the left, and "Create an account" on the right). Zoom out to fix the viewport, then tap the "Email Address or Username" field. Note that the zoom happens again and the items at the top are cut off.
On the same device, load the calypso.live link for this PR and repeat the process. Note that the zooming no longer takes place.
Simulator.Screen.Recording.-.iPhone.17.-.2025-09-30.at.18.37.50.mov
Pre-merge Checklist